/* Author: Jerry Vigil
 * Last Updated: 05/29/2012
*/
var TOP_BORDER_PCT = 0.08;
var LEFT_BORDER_PCT = 0.13;
var SCROLL_BLOCK_CELLSPACING = 8;
var ANIMATION_DURATION = 600;
var HIGHLIGHT_WIDTH = 15;

var scrollBlockDivWidth = Math.floor(window.innerWidth*(1-2.0*LEFT_BORDER_PCT));
var scrollBlockDivHeight = 0;

var newsPhotoImgWidth = 0;
var calendarMockupImgWidth = 0;
var trafficMapImgWidth = 0;
var trafficBarImgWidth = 0;
    
var leftBorderPx = Math.floor(LEFT_BORDER_PCT*window.innerWidth);
var topBorderPx = Math.floor(TOP_BORDER_PCT*window.innerHeight);

var moduleFocusIndex = 0;
var focusDiv = null;
var moduleMaximized = false;

function drawView(){			    
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var dayOfWeek = now.getDay();
    var date = now.getDate();
    var month = now.getMonth();
    
    var dateString = $.datepicker.formatDate('DD, MM d', now);
    var timeString = $.datepicker.formatTime('h:mmtt', {'hour':hour, 'minute':minute},{ampm:true});
    
    var timeAndDateDiv = $('<div></div>');
    $(timeAndDateDiv).attr({'id':'timeAndDateDiv'});
    $(timeAndDateDiv).css({'color':'white', 'font-family':'Lucida Sans', 'font-size':'44px','font-weight':'bold',});
    $(timeAndDateDiv).css({'position':'absolute','left':leftBorderPx,'top':topBorderPx,'opacity':1.0,'z-index':300})
    $(timeAndDateDiv).text( timeString );
    $(timeAndDateDiv).append( $('<br/>') );
    $(timeAndDateDiv).append( dateString );
    
    var scrollBlockDiv = $('<div></div>');    
    $(scrollBlockDiv).attr({'id':'scrollBlockDiv'});
    $(scrollBlockDiv).css({'position':'absolute','left':leftBorderPx,'top':(topBorderPx+110),'width':scrollBlockDivWidth,'overflow':'hidden'});
    
    var weatherDiv = $('<div></div>');
    $(weatherDiv).attr({'id':'weatherDiv'});
    $(weatherDiv).css({'position':'relative','left':0,'top':HIGHLIGHT_WIDTH,'z-index':400});
    var weatherImg = new Image();
    $(weatherImg).attr({'src':'img/weatherBar.png','id':'weatherImg'});
    var weatherImgHeight = 0;
    
    //Traffic bar div information.
    var trafficDiv = $('<div></div>');
    $(trafficDiv).attr({'id':'trafficDiv'});
    
    $(weatherImg).load(function() {
    	var weatherImgWidth = Math.floor(0.25*scrollBlockDivWidth);    	
    	weatherImgHeight = Math.floor(weatherImg.height*(weatherImgWidth/weatherImg.width));
    	$(weatherImg).css({'position':'relative','top':0,'left':0,'width':weatherImgWidth,'height':weatherImgHeight});
    	$(weatherDiv).append( weatherImg );
        scrollBlockDivHeight = weatherImgHeight+30;
    	$(scrollBlockDiv).css({'height':scrollBlockDivHeight});
    	
    	var weatherIconImg = new Image();
    	$(weatherIconImg).attr({'src':'img/weatherIcon.png','id':'weatherIconImg'});
        $(weatherIconImg).load(function(){
    	   var weatherIconHeight = Math.floor(weatherIconImg.height*(weatherImgWidth/weatherIconImg.width));
           $(weatherIconImg).css({'position':'absolute','left':0,'top':70,'width':weatherImgWidth});
           $(weatherDiv).append( weatherIconImg );
           
           var weatherInfoDiv = $('<div></div>');
           $(weatherInfoDiv).attr({'id':'weatherInfoDiv'});
           $(weatherInfoDiv).css({'position':'absolute','left':10,'top':(weatherIconHeight+80),'width':weatherImgWidth});
           $(weatherInfoDiv).css({'color':'white','font-family':'Lucida Sans','font-weight':'bold','font-size':'21px'});
           $(weatherInfoDiv).append( "Currently:" );
           $(weatherInfoDiv).append( $('<br>') );
           
           var temperatureDiv = $('<div></div>');
           $(temperatureDiv).attr('id','temperatureDiv');
           $(temperatureDiv).css({'font-size':'44px'});
           $(temperatureDiv).append( "67&ordm; F" );
           
           var weatherInfoTable = $('<table></table>');
           $(weatherInfoTable).attr({'cellspacing':5,'cellpadding':3});
           $(weatherInfoTable).append( $('<tr><td>H: 69&ordm;</td><td>Lo: 50&ordm;</td></tr>') );
           $(weatherInfoTable).append( $('<tr><td>Precip:</td><td>0%</td></tr>') );
           $(weatherInfoTable).append( $('<tr><td>Wind:</td><td>NNW 15mph</td></tr>') );
           $(weatherInfoTable).append( $('<tr><td>Humidity:</td><td>37%</td></tr>') );
           $(weatherInfoTable).append( $('<tr><td>UV Index:</td><td>7</td></tr>') );
           
           $(weatherInfoDiv).append( temperatureDiv );
           $(weatherInfoDiv).append( weatherInfoTable );
           
           $(weatherDiv).append( weatherInfoDiv );
    	});
    	
    	var topHighlightDiv = $('<div></div>');
        $(topHighlightDiv).attr('id','topHighlightDiv');
        $(topHighlightDiv).css({'position':'absolute','top':0,'left':0,'width':weatherImgWidth,'height':HIGHLIGHT_WIDTH,'background-color':'#FFEF00'});
        var bottomHighlightDiv = $('<div></div>');
        $(bottomHighlightDiv).attr('id','bottomHighlightDiv');
        $(bottomHighlightDiv).css({'position':'absolute','top':(weatherImgHeight+HIGHLIGHT_WIDTH),'left':0,'width':weatherImgWidth,'height':HIGHLIGHT_WIDTH,'background-color':'#FFEF00'});
         
        var trafficDivLeft = ($("#weatherImg").css('width').replace('px','')*1.0+SCROLL_BLOCK_CELLSPACING);
        $(trafficDiv).css({'position':'absolute','top':HIGHLIGHT_WIDTH,'left':trafficDivLeft});
         
        $(scrollBlockDiv).append( topHighlightDiv );
        $(scrollBlockDiv).append( bottomHighlightDiv );
    });
    
    var trafficMapImg = new Image();
    $(trafficMapImg).attr({'src':'img/trafficMap.png','id':'trafficMapImg'});
    
    //News bar div information.
    var newsDiv = $('<div></div>');
    $(newsDiv).attr({'id':'newsDiv'});
    
    //Calendar bar div information.
    var calendarDiv = $('<div></div>');
    $(calendarDiv).attr({'id':'calendarDiv'});
    
    $(trafficMapImg).load(function(){
    	$(trafficDiv).append( trafficMapImg );
    	
    	var trafficBarImg = new Image();
    	$(trafficBarImg).attr({'src':'img/trafficBottomBar.png','id':'trafficBarImg'});
    	$(trafficBarImg).load(function(){
    		$(trafficDiv).append( trafficBarImg );
    		var scaleFactor = weatherImgHeight/(trafficBarImg.height+trafficMapImg.height);
    		trafficMapImgWidth = Math.floor(scaleFactor*trafficMapImg.width);
    		var trafficMapImgHeight = Math.floor(scaleFactor*trafficMapImg.height);
    		trafficBarImgWidth = Math.floor(scaleFactor*trafficBarImg.width);
    		var trafficBarImgHeight = Math.floor(scaleFactor*trafficBarImg.height);
    		
    		$(trafficMapImg).css({'width':trafficMapImgWidth,'height':trafficMapImgHeight});
    		$(trafficBarImg).css({'position':'absolute','left':0,'top':trafficMapImgHeight,width:trafficBarImgWidth,height:trafficBarImgHeight});
    		
    		//news bar info
    		var weatherImgWidth = $("#weatherImg").css('width').replace('px','')*1.0;
    		$(newsDiv).css({'position':'absolute','top':HIGHLIGHT_WIDTH,'left':(weatherImgWidth+trafficMapImgWidth+SCROLL_BLOCK_CELLSPACING*2.0)});
    		var newsPhotoImg = new Image();
    		$(newsPhotoImg).attr({'src':'img/newsPhoto.png','id':'newsPhotoImg'});
    		var newsBarImg = new Image();
    		$(newsBarImg).attr({'src':'img/newsBottomBar.png','id':'newsBarImg'});
    		
    		$(newsPhotoImg).load(function(){
    			$(newsDiv).append( newsPhotoImg );
    			$(newsPhotoImg).css({'width':Math.floor(newsPhotoImg.width)});
    			
    			$(newsBarImg).load(function(){
    				$(newsDiv).append( newsBarImg );
    				var scaleFactor = weatherImgHeight/(newsPhotoImg.height+newsBarImg.height);
    				newsPhotoImgWidth = Math.floor(scaleFactor*newsPhotoImg.width);
    				var newsPhotoImgHeight = Math.floor(scaleFactor*newsPhotoImg.height);
    				var newsBarImgWidth = Math.floor(scaleFactor*newsBarImg.width);
    				var newsBarImgHeight = Math.floor(scaleFactor*newsBarImg.height);
    				
    				$(newsPhotoImg).css({'width':newsPhotoImgWidth,'height':newsPhotoImgHeight});
    				$(newsBarImg).css({'position':'absolute','left':0,'top':newsPhotoImgHeight,'width':newsBarImgWidth,'height':newsBarImgHeight});
    				
    				var newsTextDiv = $('<div></div>');
    				$(newsTextDiv).attr({'id':'newsTextDiv'});
    				$(newsTextDiv).css({'color':'white','font-family':'Lucida Sans','font-weight':'bold','font-size':'21px'});
    				$(newsTextDiv).css({'position':'absolute','top':(newsPhotoImgHeight+55),'left':10,'width':(newsPhotoImgWidth-20),'height':(newsBarImgHeight-60),'overflow':'hidden'});
    				$(newsTextDiv).text( "The Palestinian Authority leadership is planning to honor the remains of Palestinian suicide bombers and terrorists with full military services in Ramallah. The IDF will deliver the bodies to representatives of the PA on Thursday, PA Minister for Prisoners Affairs, Issa Qaraqi, said. Related: He said that the PA would hold a 'national rally' in the Mukata presidential compound in Ramallah in honor of the martyrs. The rally will be attended by PA President Mahmoud Abbas, PLO leaders and families of the Palestinians who were killed in suicide bombings and other terror attacks over the past three decades." );
    				
    				$(newsDiv).append( newsTextDiv );
    				
    				var calendarDivLeft = (weatherImgWidth+$("#trafficMapImg").css('width').replace('px','')*1.0+newsPhotoImgWidth+SCROLL_BLOCK_CELLSPACING*3.0);
                    $(calendarDiv).css({'position':'absolute','top':HIGHLIGHT_WIDTH,'left':calendarDivLeft});
                    var calendarMockupImg = new Image();
                    $(calendarMockupImg).attr({'src':'img/calendarMockup.png','id':'calendarMockupImg'});
    
                    $(calendarMockupImg).load(function(){
    					$(calendarDiv).append( calendarMockupImg );
    					
    					var calendarScaleFactor = (weatherImgHeight/calendarMockupImg.height);
    					calendarMockupImgWidth = Math.floor(calendarScaleFactor*calendarMockupImg.width);
    					var calendarMockupImgHeight = Math.floor(calendarScaleFactor*calendarMockupImg.height);
    					$(calendarMockupImg).css({'position':'absolute','width':calendarMockupImgWidth,'height':calendarMockupImgHeight}); 
    				});
    			});
    		});
    		
    	});
    });
    
    $(scrollBlockDiv).append( weatherDiv );
    $(scrollBlockDiv).append( trafficDiv );
    $(scrollBlockDiv).append( newsDiv );
    $(scrollBlockDiv).append( calendarDiv );

    focusDiv = $(weatherDiv);
    /// alert( "focusDivId = " + $(focusDiv).attr('id') );
    
    $("#main").css({'background-color':'rgba(0,0,0,0.6)','position':'absolute','left':0,'top':0,'width':'100%','height':'100%','z-index':200});
    $("#main").append( timeAndDateDiv );
    $("#main").append( scrollBlockDiv );
}

$(window).resize(function(){
	//resize processing goes here.
});

//Process key events here.
$(window).keydown(function(evt){
	if ( evt.keyCode == $.ui.keyCode.LEFT ) {
	  //LEFT key handler
	 if ( !moduleMaximized ) {
	    if ( moduleFocusIndex > 0 ) {
	      moduleFocusIndex--;
          processFocusIndex( moduleFocusIndex );
       	}
     }
	}
	else if ( evt.keyCode == $.ui.keyCode.RIGHT ) {
	  	//RIGHT key handler.
	  if ( !moduleMaximized ) {
	   if ( moduleFocusIndex < 3 ) {
	    	moduleFocusIndex++;
        	processFocusIndex( moduleFocusIndex );
      	}
      }
	}
	else if ( evt.keyCode == $.ui.keyCode.ENTER ) {
		//ENTER key handler.
	 if ( !moduleMaximized ) {			
		maximizeFocusModule();
		moduleMaximized = true;
	 }
	}
	else if ( evt.keyCode == $.ui.keyCode.ESCAPE ) {
		//ESCAPE key handler.
	 if ( moduleMaximized ) {
		// var sumPriorImgHeight = 0;
		minimizeFocusModule();
        moduleMaximized = false;
	 }
	}
});

function processFocusIndex( focusIndex ) {
  var trafficMapImgWidth = $("#trafficMapImg").css('width').replace('px','')*1.0;
  var weatherImgWidth = $("#weatherImg").css('width').replace('px','')*1.0;

  switch(moduleFocusIndex) {
     case 0:
     	//weather div
        // this case is different
        focusDiv = $("#weatherDiv");
        var scrollOffset = -1.0*$("#weatherDiv").css('left').replace('px','');
        updateModuleDivPositions(scrollOffset);
        
        setTimeout(function(){
     	 	$("#topHighlightDiv").css({'left':0,'width':weatherImgWidth});
	     	$("#bottomHighlightDiv").css({'left':0,'width':weatherImgWidth});
	    },ANIMATION_DURATION);
     	break;
     case 1:
     	//traffic div
        //this case is also a little different, but it could also be handled similarly.
        focusDiv = $("#trafficDiv");
        var scrollOffset = Math.floor((scrollBlockDivWidth/2.0)-(trafficMapImgWidth/2.0) - $("#trafficDiv").css('left').replace('px','')*1.0);
        updateModuleDivPositions(scrollOffset);
        
        setTimeout(function(){
        	$("#topHighlightDiv").css({'left':$("#trafficDiv").css('left'),'width':trafficMapImgWidth});
	    	$("#bottomHighlightDiv").css({'left':$("#trafficDiv").css('left'),'width':trafficMapImgWidth});
	    },ANIMATION_DURATION);
	    break;
   	  case 2:
     	//news div
     	focusDiv = $("#newsDiv");
      	var scrollOffset = Math.floor((scrollBlockDivWidth/2.0)-(newsPhotoImgWidth/2.0) - $("#newsDiv").css('left').replace('px','')*1.0);
      	updateModuleDivPositions(scrollOffset);
      	
      	setTimeout(function(){
        	$("#topHighlightDiv").css({'left':$("#newsDiv").css('left'),'width':newsPhotoImgWidth});
        	$("#bottomHighlightDiv").css({'left':$("#newsDiv").css('left'),'width':newsPhotoImgWidth});
        },ANIMATION_DURATION);
      	break;
      case 3:
      	//calendar div
      	focusDiv = $("#calendarDiv");
        var scrollOffset = Math.floor((scrollBlockDivWidth/2.0)-(calendarMockupImgWidth/2.0) - $("#calendarDiv").css('left').replace('px','')*1.0);
        updateModuleDivPositions(scrollOffset);
        
        setTimeout(function(){
        	$("#topHighlightDiv").css({'left':$("#calendarDiv").css('left'),'width':calendarMockupImgWidth});
        	$("#bottomHighlightDiv").css({'left':$("#calendarDiv").css('left'),'width':calendarMockupImgWidth});
        },ANIMATION_DURATION);
      	break;
  }
}

function updateModuleDivPositions( scrollOffset ) {
	//div updates
	var weatherDivLeft = Math.floor($("#weatherDiv").css('left').replace('px','')*1.0+scrollOffset);
	var trafficDivLeft = Math.floor($("#trafficDiv").css('left').replace('px','')*1.0+scrollOffset);
	var newsDivLeft = Math.floor($("#newsDiv").css('left').replace('px','')*1.0+scrollOffset);
	var calendarDivLeft = Math.floor($("#calendarDiv").css('left').replace('px','')*1.0+scrollOffset);
	
	//$("#weatherDiv").css({'left':weatherDivLeft});
	$("#weatherDiv").animate({
		left: '+='+scrollOffset
		},{ duration: ANIMATION_DURATION, queue: false },function(){});
	
	//$("#trafficDiv").css({'left':trafficDivLeft});
	$("#trafficDiv").animate({
		left: '+='+scrollOffset
		},{ duration: ANIMATION_DURATION, queue: false },function(){});

	//$("#newsDiv").css({'left':newsDivLeft});
    $("#newsDiv").animate({
    	left: '+='+scrollOffset
    	},{ duration: ANIMATION_DURATION, queue: false },function(){});
    
    //$("#calendarDiv").css({'left':calendarDivLeft});
    $("#calendarDiv").animate({
    	left: '+='+scrollOffset
    	},{ duration: ANIMATION_DURATION, queue: false },function(){});
} 

function loadImages() {
	var imgList = new Array('img/weatherBar.png','img/weatherIcon.png','img/trafficMap.png','img/trafficBottomBar.png','img/newsPhoto.png','img/newsBottomBar.png','img/calendarMockup.png');
	$({}).imageLoader({
		images:imgList,
		async:true,
		allcomplete:function(){ 
			alert('all images have loaded');
		}
	});
}

function maximizeFocusModule() {
	$(focusDiv).attr('oldLeft',$(focusDiv).css('left'));
	var focusDivHeight = 0;
	
	$(focusDiv).children("img").each(function(){
		$(focusDiv).attr('oldWidth',$(this).css('width').replace('px','')*1.0);
		focusDivHeight += $(this).css('height').replace('px','')*1.0;
	});
	$(focusDiv).attr('oldHeight',focusDivHeight);
		
	var scaleFactor = scrollBlockDivWidth/$(focusDiv).attr('oldWidth');
	$(focusDiv).attr('scaleFactor',scaleFactor);
		
	$("#scrollBlockDiv").css({'height':Math.floor(focusDivHeight*scaleFactor)});
	$(focusDiv).css({'z-index':500});
	
	$(focusDiv).animate({
		'left':0,
		'top':0
	},{ duration:ANIMATION_DURATION, queue: false },function(){});
			
	$(focusDiv).children("img").each(function(){
		var myImgHeight = Math.floor(scaleFactor*$(this).css('height').replace('px','')*1.0);
		var myImgTop = Math.floor(scaleFactor*$(this).css('top').replace('px','')*1.0);
	
		$(this).animate({
			'width':scrollBlockDivWidth,
			'height':myImgHeight,
			'top':myImgTop
		},{ duration: ANIMATION_DURATION, queue: false },function(){});
	});
		
	$(focusDiv).children("div").each(function(){
		var newDivTop = Math.floor(($(this).css('top').replace('px','')*1.0)*scaleFactor);
		var newDivWidth = Math.floor(($(this).css('width').replace('px','')*1.0)*scaleFactor);
		var newDivHeight = Math.floor(($(this).css('height').replace('px','')*1.0)*scaleFactor);
		var newDivFontSize = Math.floor(($(this).css('font-size').replace('px','')*1.0)*scaleFactor);
		$(this).animate({
			'top':newDivTop,
			'width':newDivWidth,
			'height':newDivHeight,
			'font-size':newDivFontSize
		},{ duration: ANIMATION_DURATION, queue: false },function(){});
			
		$(this).children('div').each(function(){
			var newDivFontSize = Math.floor(($(this).css('font-size').replace('px','')*1.0)*scaleFactor);
			$(this).animate({
				'font-size':newDivFontSize
			},{ duration:ANIMATION_DURATION, queue: false},function(){});
	   	});
	});
}

function minimizeFocusModule() {
 	$(focusDiv).animate({
		'left':$(focusDiv).attr('oldLeft'),
		'top':HIGHLIGHT_WIDTH
	},{ duration: ANIMATION_DURATION, queue: false },function(){});
		
	$(focusDiv).children('img').each(function(){
		var myImgHeight = Math.floor(($(this).css('height').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
		var myImgTop = Math.floor(($(this).css('top').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
		$(this).animate({
			'width':$(focusDiv).attr('oldWidth'),
			'height':myImgHeight,
			'top':myImgTop
		},{ duration: ANIMATION_DURATION, queue: false },function(){});
	});
		
	$(focusDiv).children("div").each(function(){
		var newDivTop = Math.floor(($(this).css('top').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
		var newDivWidth = Math.floor(($(this).css('width').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
		var newDivHeight = Math.floor(($(this).css('height').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
		var newDivFontSize = Math.floor(($(this).css('font-size').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
		$(this).animate({
			'top':newDivTop,
			'width':newDivWidth,
			'height':newDivHeight,
			'font-size':newDivFontSize
		},{ duration: ANIMATION_DURATION, queue: false },function(){});
			
		$(this).children('div').each(function(){
			var newDivFontSize = Math.floor(($(this).css('font-size').replace('px','')*1.0)/$(focusDiv).attr('scaleFactor'));
			$(this).animate({
				'font-size':newDivFontSize
			},{ duration: ANIMATION_DURATION, queue: false },function(){});
			});
	});
		
	setTimeout(function(){
		$("#scrollBlockDiv").css({'height':scrollBlockDivHeight});
		$(focusDiv).css({'z-index':300});
	},ANIMATION_DURATION);	
}
